<template>
  <el-header>
    <a href="#/">
      <span>十六号会员管理系统</span>
    </a>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="edit" icon="el-icon-edit">修改密码</el-dropdown-item>
        <el-dropdown-item command="exit" icon="el-icon-s-promotion">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>

<script>
  import {
    logout
  } from '@/api/login'
  export default {

    methods: {
      handleCommand(command) {
        if (command === 'exit') {
          // 退出登录
          const token = localStorage.getItem('vue-msm-token')
          logout(token).then(res => {
            if (res.status == 200) {
              localStorage.removeItem('vue-msm-token')
              localStorage.removeItem('vue-msm-user')
              this.$router.push('/login')
              this.$message.success('退出登录成功')
            } else {
              this.$message.error('退出失败')
            }

          })
        } else {
          // 修改密码
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  a span {
    color: white;
    font-size: 20px;
    line-height: 60px;

  }

  .el-dropdown {
    float: right;
    color: white;
    line-height: 60px;
    cursor: pointer;
    padding-right: 80px;
  }
</style>